<template>
  <div class="mapbj">
    <img src="@/assets/img/home/cangnan.png" usemap="#Map" border="0" style="width: 44.3125rem; height: 33.0625rem;" />
    <map name="Map" id="Map">
      <!-- 桥墩镇 -->
      <div class="qiaodun map_icon" @click="switchMaptwo(1, '桥墩镇','330327113000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="9,55,41,44,73,47,119,73,136,90,164,96,259,94,281,131,292,165,300,203,295,230,263,241,242,248,222,239,203,201,160,155,15,70" />
      </div>
      <!-- 灵溪镇 -->
      <div class="lingxi map_icon" @click="switchMaptwo(2, '灵溪镇','330327100000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="268,96,297,138,298,155,308,189,305,224,322,228,324,246,344,230,361,215,364,203,348,186,349,162,360,141,384,136,442,115,454,96,419,61,409,48,360,42,333,45,289,86"
        />
      </div>
      <!-- 藻溪镇 -->
      <div class="zaoxi map_icon" @click="switchMaptwo(3,'藻溪镇','330327112000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="442,124,461,143,466,160,459,168,453,168,461,191,487,202,499,211,480,210,458,214,457,233,422,210,394,201,383,204,366,207,363,191,351,183,354,159,368,143"
        />
      </div>
      <!-- 矾山镇 -->
      <div class="fanshan map_icon" @click="switchMaptwo(4, '矾山镇','330327116000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="376,213,361,228,330,251,336,282,373,341,410,322,425,319,398,304,382,290,386,273,404,268,423,274,449,265,456,251,458,243,419,216,396,208" />
      </div>
      <!-- 凤阳畲族乡 -->
      <div class="fengyang map_icon" @click="switchMaptwo(5, '凤阳畲族乡','330327216000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="440,322,396,301,386,288,386,273,402,270,420,275,428,281,454,290,463,301,452,321" />
      </div>
      <!-- 岱岭畲族乡 -->
      <div class="dailing map_icon" @click="switchMaptwo(6, '岱岭畲族乡','330327218000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="394,377,428,362,443,346,443,333,430,322,412,326,379,342,388,357" />
      </div>
      <!-- 马站镇 -->
      <div class="mazhan map_icon" @click="switchMaptwo(7, '马站镇','330327118000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="391,384,381,419,373,451,427,516,425,462,433,449,455,465,466,504,487,518,508,488,533,388,526,361,469,348,453,334,449,353" />
      </div>
      <!-- 赤溪镇 -->
      <div class="chixi map_icon" @click="switchMaptwo(8, '赤溪镇','330327117000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="530,355,516,314,515,275,536,258,548,253,526,226,502,217,480,218,466,228,465,253,461,266,430,275,454,290,468,303,463,317,459,328,474,347" />
      </div>
      <!-- 金乡镇 -->
      <div class="jinxiang map_icon" @click="switchMaptwo(9, '金乡镇','330327107000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="543,230,559,251,596,262,626,289,638,307,657,289,645,238,654,209,701,167,696,153,659,135,619,166,588,157,579,160,582,183,571,211" />
      </div>
      <!-- 钱库镇 -->
      <div class="qianku map_icon" @click="switchMaptwo(10, '钱库镇','330327104000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="457,174,471,190,501,205,525,226,555,214,572,187,568,161,568,127,567,108,547,113,543,132,500,137,471,143,473,160" />
      </div>
      <!-- 宜山镇 -->
      <div class="yishan map_icon" @click="switchMaptwo(11, '宜山镇','330327103000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="492,128,511,102,536,100,545,110,540,125,516,131" />
      </div>
      <!-- 龙港镇 -->
      <div class="longgang map_icon" @click="switchMaptwo(12, '龙港镇','330327101000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="451,115,460,104,468,90,499,101,476,51,484,33,554,12,586,11,602,34,597,80,610,127,644,123,612,155,587,149,574,152,574,124,564,95,539,97,527,90,498,110,490,127,463,135"
        />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'mapCen',

  data () {
    return {
      qxname: '苍南县',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330327000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        /* console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName) */
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 14.5%;
  left: 25%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.qiaodun {
  position: absolute;
  top: 7%;
  left: 24%;
}
.lingxi {
  position: absolute;
  top: 0%;
  left: 40%;
}
.zaoxi {
  position: absolute;
  top: 12%;
  left: 51%;
}
.fanshan {
  position: absolute;
  top: 29%;
  left: 45%;
}
.fengyang {
  position: absolute;
  top: 39%;
  left: 51%;
}
.dailing {
  position: absolute;
  top: 48%;
  left: 49%;
}
.mazhan {
  position: absolute;
  top: 64%;
  left: 60%;
}
.chixi {
  position: absolute;
  top: 33%;
  left: 60%;
}
.jinxiang {
  position: absolute;
  top: 27%;
  left: 76%;
}
.qianku {
  position: absolute;
  top: 20%;
  left: 65%;
}
.yishan {
  position: absolute;
  top: 6%;
  left: 65%;
}
.longgang {
  position: absolute;
  top: -3%;
  left: 66%;
}
</style>
